<template>
	<div style="overflow:auto;height:70vh" class="cashbackBox">
		<div class="operateDiv"  style="margin-bottom:15px">
			<p class="operateText"><sup>*</sup>获奖条件:</p>
			<span v-text="awardObtainTxt"></span>
		</div>
		<el-card class="box-card" v-if="cashbackType == '986001'">
			<div slot="header" class="clearfix">
				<span>奖项-固定金额</span>
			</div>
			<div class="moneyBox">
				<div class="row">
					返现金额&nbsp;
					<span v-text="firstData&&firstData[0]&&(firstData[0].cashbackMoney||null)"></span>
					<span class="">元</span>
				</div>
			</div>
		</el-card>
		<el-card class="box-card" v-if="cashbackType == '986003'">
			<div slot="header" class="clearfix">
				<span>奖项-百分比金额</span>
			</div>
			<div class="moneyBox">
				<div class="row">
					返现金额&nbsp;
					<span v-text="firstData&&firstData[0]&&(firstData[0].cashbackMoney||null)" ></span>
					<span class="">%</span>
				</div>
			</div>
		</el-card>
		<div class="mxBox" v-if="cashbackType == '986002'">
			<el-card class="box-card" v-for="(item,index) in firstData" :key="index">
				<div slot="header" class="clearfix">
					<span>奖项{{index+1}}-随机返现金额</span>
				</div>
				<div :class="'moneyBox item' + index" :data-id='item.id||null' :data-lottery="item.lotteryId">
					<div class="row">
						返现金额&nbsp;
						<span v-text="getVal(0,item)"></span>
						&nbsp;~&nbsp;
						<span v-text="getVal(1,item)"></span>
					</div>
					<div class="row">
						中奖概率&nbsp;
						<span v-text="item.winningProbability"></span>
						/100000
					</div>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script>
	import {FIND_LOTTERY_BY_CODE,
		FIND_CASHBACK_BY_CODE,
		} from '@/config/url'
	import Bus from '@/bus.js'
	import { publicVM } from "_config/public.js";

	export default {
		mixins: [publicVM],
		props:['lotterData'],
		data() {
			return {
				giftID:null,
				itemObj:null,
				btnType:'3',
				value: 1,
				value1: '1',
				checked: '',
				options: [{
					value: 1,
					label: '金额'
				}, {
					value: 2,
					label: '电量'
				}],
				prizePos:null,//奖品在列表中的位置
				activityCode:sessionStorage.getItem('activityCode'),//活动code
				awardObtainType:'0',//类型
				awardObtain:0,//获奖条件：0 不限，1金额，2电量
				obtainMoney:null,//满足获奖的金额
				repeatRecord:sessionStorage.getItem('repeatRecord'),//活动复录：0 初录，1 复录
				iSelectAward:true,//是否可以选择获奖条件
				lotteryContent:null,//阶梯内容
				diffText:'与初录不一致',
				diffAwardObtain:false,
				firstID:null,
				pos:null,
				up:null,
				showTxt:false,//显示提示
				cashbackType:sessionStorage.getItem('cashbackType'),//返现类型
				activityCashbacks:[],//提交奖项数据
				maxInput:null,
				minInput:null,
				winningProbability:null,//获奖几率
				lotteryData:[],//阶梯数据
				repeatRecordContent:null,//初录阶梯内容
			}
		},
		watch:{
			// lotterData(val){
			// 	let data = val[sessionStorage.getItem('lotterySort')-1]
			// 	this.updataLottery(data)
			// }
		},
		computed:{
			firstData(){
				return this.$store.getters.getFirstCouponData
			},
			awardObtainTxt(){
				let data = this.lotterData
				return this.updataLottery(data)
			}
		},
		methods: {
			updataLottery(val){
				let awardObtain = val.awardObtain
				let text = ''
				if(awardObtain == 0){
					text = '无'
				}else{
					if(awardObtain == 1){
						text = '金额'
					}else if(awardObtain == 2){
						text = '电量'
					}
					text +=  ` 满 ${val.obtainMoney}${awardObtain == 1?'元':'度'}`
				}
				return text;
			},
			getVal(type,item){
				if(/,/.test(item.cashbackMoney)){
					let arr = item.cashbackMoney.split(',')
					return arr[type]
				}else{
					return item.cashbackMoney
				}
			},
		},
	}
</script>

<style lang="less">
    @import '~_config/mixin.less';

	.operateDiv {
		width: 100%;
		margin: auto;
		margin-bottom: 0.08rem;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-left: 0;
		position: relative;
	}
	.checkTxt{
		color: #FF2E2E;
		position: absolute;
		right: -7%;
	}
	
	.operateText {
		text-align: end;
		width: 13%;
		margin-right: 0.08rem;
	}
	
	.setSelect {
		margin-right: 0.08rem;
		width: 0.7rem;
	}
	.setInput {
		margin-left: 0.08rem;
		width: 0.7rem;
	}
	
	.giveSet {
		color: #3395FF;
		text-decoration: underline;
		cursor: pointer;
	}
	
	.redBagDiv .el-checkbox {
		padding-top: 0.03rem;
	}
	.cashbackBox{
		padding-bottom: .4rem;
		.box-card{
			width: 74%;
			margin-left: 9%;
			font-size:20px;
			font-weight:400;
			color:rgba(45,51,67,1);
			margin-bottom: 20px;
			.checkTxt{
				display: none
			}
			.el-card__body{
				padding: 30px 40px 40px;
				.bs();
				.moneyBox{
					.fx(column,space-between,flex-start);
					width: 50%;
					height: 100%;;
					.row{
						position: relative;
						width: 100%;
						height: .3rem;
						.fx(row,flex-start);
						.cashInput{
							.wh(242px,40px);
						}
						.mxInput{
							.wh(120px,40px);
						}
						.txtUnit{
							position: absolute;
							font-size: 18px;
							right: 42%;
						}
						.txt{
							font-size:16px;
							font-family:PingFangSC-Regular;
							font-weight:400;
							color:rgba(255,46,46,1);
							position: absolute;
							right: 17%;
							bottom: -26%;
						}
					}
				}
			}
		}
		.addRow{
			font-size:20px;
			font-family:PingFangSC-Regular;
			font-weight:400;
			color:rgba(51,149,255,1);
			border: 1px dashed #B5C2CA;
			.wh(74%,56px);
			margin-left: 9%;
			text-align: center;
			line-height: 56px;
			cursor: pointer;
			letter-spacing: 4px;
		}
		.delBtn{
			.wh(90px,32px);
			float: right;
			padding: 3px 0;
		}
	}
</style>